<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>每日业绩</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 模拟数据
function getVirtualData(year) {
	const date = +echarts.time.parse(year + '-01-01');
	const end = +echarts.time.parse(+year + 1 + '-01-01');
	const dayTime = 3600 * 24 * 1000;
	const data = [];
	for (let time = date; time < end; time += dayTime) {
		data.push([
			echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
			Math.floor(Math.random() * 10000)
		]);
	}
	return data;
}
// console.log(echarts.format.formatTime('yyyy-MM-dd', 1689673264000));
// console.log(echarts.time.format(1689673264000, '{yyyy}-{MM}-{dd}'));

// 指定图表的配置项和数据
var option = {
	title: {
		top: 30,
		left: 'center',
		text: '每日业绩'
	},
	tooltip: {},
	visualMap: {
		type: 'piecewise',
		show: true,
		splitNumber: 5,
		// color: ['#00007f', '#0000ff', '#00aaff', '#aaff7f'],
		min: 0,
		max: 10000,
		orient: 'horizontal',
		left: 'center',
		top: 65
	},
	calendar: {
		top: 120,
		left: 80,
		right: 30,
		cellSize: ['auto', 13],
		range: '2016',
		itemStyle: {
			borderWidth: 0.5
		},
		yearLabel: { show: true }
	},
	series: {
		type: 'heatmap',
		coordinateSystem: 'calendar',
		data: getVirtualData('2016')
	}
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 处理点击事件
myChart.on('click', function (params) {
	// console.log(params);
	console.log(params.data);
});

</script>
</html>
